<script setup>
import {ref} from "vue";
import {gameRequireAddAPI} from "@/api/AdminApi/game.js";
import 'element-plus/theme-chalk/el-message.css'
import {ElMessage} from "element-plus";

const gameMinRequire = ref({
  gameId: null,
  type: null,
  os: null,
  cpu: null,
  ram: null,
  gpu: null,
  dx: null,
  size: null
})
const gameMaxRequire = ref({
  gameId: null,
  type: null,
  os: null,
  cpu: null,
  ram: null,
  gpu: null,
  dx: null,
  size: null
})

const rules = {
  os: [
    { required: true, message: '请输入操作系统名称', trigger: 'blur' }
  ],
  cpu: [
    { required: true, message: '请输入处理器名称', trigger: 'blur' }
  ],
  ram: [
    { required: true, message: '请输入内存容量', trigger: 'blur' }
  ],
  gpu: [
    { required: true, message: '请输入显卡名称', trigger: 'blur' }
  ],
  dx: [
    { required: true, message: '请输入dx版本', trigger: 'blur' }
  ],
  size: [
    { required: true, message: '请输入游戏大小', trigger: 'blur' }
  ]
}

const formRefMin = ref()
const formRefMax = ref()
// 修改按钮
const submit = async (gameId) => {
  gameMinRequire.value.gameId = gameId
  gameMinRequire.value.type = 0
  gameMaxRequire.value.gameId = gameId
  gameMaxRequire.value.type = 1
  const res = await gameRequireAddAPI([gameMinRequire.value, gameMaxRequire.value])
  if (res.code === 1) {
    return res.code
  } else {
    ElMessage.error(res.msg)
  }
}

const validate = async () => {
  try {
    const isValid1 = await formRefMin.value.validate();
    const isValid2 = await formRefMax.value.validate()
    if (isValid1 && isValid2) {
      return true
    }
  } catch (error) {
    return false
  }
}

defineExpose({
  submit:submit,
  validate:validate
})
</script>

<template>
  <el-descriptions
      border
      :column="2"
      direction="vertical">
    <el-descriptions-item label="最低配置">
      <el-form ref="formRefMin" :model="gameMinRequire" :rules="rules" label-width="auto">
        <el-form-item label="操作系统" prop="os">
          <el-input v-model="gameMinRequire.os"></el-input>
        </el-form-item>
        <el-form-item label="处理器" prop="cpu">
          <el-input v-model="gameMinRequire.cpu"></el-input>
        </el-form-item>
        <el-form-item label="内存" prop="ram">
          <el-input v-model="gameMinRequire.ram"></el-input>
        </el-form-item>
        <el-form-item label="显卡" prop="gpu">
          <el-input v-model="gameMinRequire.gpu"></el-input>
        </el-form-item>
        <el-form-item label="dx版本" prop="dx">
          <el-input v-model="gameMinRequire.dx"></el-input>
        </el-form-item>
        <el-form-item label="大小" prop="size">
          <el-input v-model="gameMinRequire.size"></el-input>
        </el-form-item>
      </el-form>
    </el-descriptions-item>
    <el-descriptions-item label="最高配置">
      <el-form ref="formRefMax" :model="gameMaxRequire" :rules="rules" label-width="auto">
        <el-form-item label="操作系统" prop="os">
          <el-input v-model="gameMaxRequire.os"></el-input>
        </el-form-item>
        <el-form-item label="处理器" prop="cpu">
          <el-input v-model="gameMaxRequire.cpu"></el-input>
        </el-form-item>
        <el-form-item label="内存" prop="ram">
          <el-input v-model="gameMaxRequire.ram"></el-input>
        </el-form-item>
        <el-form-item label="显卡" prop="gpu">
          <el-input v-model="gameMaxRequire.gpu"></el-input>
        </el-form-item>
        <el-form-item label="dx版本" prop="dx">
          <el-input v-model="gameMaxRequire.dx"></el-input>
        </el-form-item>
        <el-form-item label="大小" prop="size">
          <el-input v-model="gameMaxRequire.size"></el-input>
        </el-form-item>
      </el-form>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped>

</style>
